<template>
  <div class="table-actions">
    <div>
      <slot name="headerBtn">
        <template v-for="item in btnArr||[]">
          <el-button
            :type="item.type||'primary'"
            :icon="item.icon"
            :size="item.size || 'mini'"
            :disabled="item.disabledRule ? item.disabledRule() : false"
            plain
            @click="emitCommit(item)"
            v-hasPermi="item.permissions ? [item.permissions] : null"
          >{{ item.text }}
          </el-button>
        </template>
      </slot>
    </div>
    <right-toolbar v-if="showTool" :showSearch.sync="onOff" @queryTable="$emit('refresh')"/>
  </div>
</template>

<script>
export default {
  name: "tableAction",
  props: {
    btnArr: {
      type: Array,
      default: () => []
    },
    showTool: {
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      onOff: true,
    }
  },
  watch: {
    onOff(val) {
      this.onOff = val
      this.emitCommit( {emit: 'toggle'})
    }
  },
  methods: {
    emitCommit(item) {
      this.$emit('clickEvent', {item})
      this.$emit(item.emit)
    }
  }
}
</script>

<style scoped>
.table-actions {
  display: flex;
  justify-content: space-between;
}
</style>
